import React, { Component, Fragment } from 'react'
import { Link } from 'react-router-dom'
import { Form, Input, Button, InputNumber, Upload, message, Image, Breadcrumb } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
import { addItem } from '_api'

class Home extends Component {
  constructor (props) {
    super(props)
    this.state = {
      thumb: '', // 封面图片
      context: '',
      editor: null, // 富文本对象
      history: props.history
    }
  }
  render() {
    return (
      <Fragment>
        {/* 面包屑导航 */}
        <Breadcrumb>
          <Breadcrumb.Item>
            <Link to="/admin/dashBoard">仪表盘</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Link to="/admin/itemlist">商品管理</Link>
            </Breadcrumb.Item>
          <Breadcrumb.Item>增加商品</Breadcrumb.Item>
        </Breadcrumb>
        {/* 表单 */}
        <Form
          style={{paddingTop:40}}
          scrollToFirstError
          name="basic"
          labelCol={{ span: 3, }}
          wrapperCol={{ span: 14, }}
          initialValues={{ remember: true, }}
          onFinish={this.onFinish}
        >
          {/* 商品名称 */}
          <Form.Item
            label="商品名称"
            name="itemName"
            rules={[
              {
                required: true,
                message: '请输入商品名称!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          {/* 商品价格 */}
          <Form.Item
            label="商品价格"
            name="itemPrice"
            rules={[
              {
                required: true,
                message: '请输入商品价格!',
              },
            ]}
          >
            <InputNumber />
          </Form.Item>
          {/* 商品描述 */}
          <Form.Item
            label="商品描述"
            name="itemDesc"
          >
            <Input />
          </Form.Item>
          {/* 封面图片 */}
          <Form.Item
            label="上传封面图片"
            wrapperCol={{
              offset: 0,
              span: 14,
            }}
          >
            <Upload
              name='thumb'
              action='/hala/upload'
              onChange={this.uploadPic}
            >
              <Button icon={<UploadOutlined />}>Click to Upload</Button>
            </Upload>
            <Image src={this.state.thumb} width={250} />
          </Form.Item>
          {/* 商品详情 */}
          <Form.Item label="商品详情">
            <div id="toolbar"></div>
            <div id="rich-text" style={{height:300}}>
            </div>
          </Form.Item>
          {/* 提交按钮 */}
          <Form.Item
            wrapperCol={{
              offset: 3,
              span: 14,
            }}
          >
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Fragment>
    )
  };
  componentDidMount() {
    // 初始化富文本框
    this.initRichText()
  }
  // 上传图片
  uploadPic = (info) => {
    if (info.file.status !== 'uploading') {
      this.setState({
        thumb: info.file.response.data
      })
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 上传成功`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 上传·失败`);
    }
  }
  // 提交表单
  onFinish = (form) => {
    message.loading('添加中...', 'submint')
    form.thumb = this.state.thumb
    form.context = this.state.editor.root.innerHTML
    console.log(form);
    // 提交表单,成功返回商品页
    addItem(form).then(res => {
      if (res.data.code === 200) {
        message.success('添加成功,返回列表页', 'submint')
        this.state.history.replace('/admin/itemlist')
      }
    })
  }
  // 初始化富文本框
  initRichText = () => {
    // 自定义工具栏配置
    const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ 'header': 1 }, { 'header': 2 }],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      [{ 'script': 'sub' }, { 'script': 'super' }],
      [{ 'indent': '-1' }, { 'indent': '+1' }],
      [{ 'direction': 'rtl' }],
      [{ 'size': ['small', false, 'large', 'huge'] }],
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'font': [] }],
      [{ 'align': [] }],
      ['clean']
    ];
    const editor = new Quill('#rich-text', {
      modules: {
        toolbar: toolbarOptions
      },
      placeholder: '请键入商品详情...',
      theme: 'snow'
    });
    this.setState({
      editor,
    })
  }
}

export default Home
